@import '../../ui/base'

.root
	background-color #99D14A
	border: 1px solid #dfdfdf;
	border-radius: 20px;
	cursor: pointer;
	display: inline-block;
	height: 18px;
	position: relative;
	vertical-align: middle;
	width: 60px;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-sizing: content-box;
	background-clip: content-box;
	border-color: rgb(223, 223, 223);
	box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
	transition: border 0.4s, box-shadow 0.4s;
	> small
		background: #fff;
		border-radius: 100%;
		box-shadow: 0 1px 3px rgba(0,0,0,0.4);
		height: 22px;
		position: absolute;
		top: -2px;
		width: 22px;
		left: 0px;
		transform translate3d(0, 0, 0)
		transition-property: transform
		transition-timing-function $animation-curve-default;
		transition-duration .3s


.root.active
	border-color: #8AB6F9;
	box-shadow: #8AB6F9 0px 0px 0px 16px inset;
	background-color: #8AB6F9
	> small
		left: 39px;
		background-color: rgb(255, 255, 255);

.root.simple
	background-color rgb(236, 236, 236)
	width 40px
	&.small
		width 33px
		height 12px
		small
			width 12px
			height 12px
			top 0
		&.active
			box-shadow #40A2EE 0 0 0 16px inset
			&.disabled
				opacity 1
				box-shadow #b3d9fa 0 0 0 16px inset
				border-color #b3dafa
				small
					background-color #fff
			small
				transform translate3d(21px, 0, 0)
	&.active
		box-shadow #40a2ee 0 0 0 16px inset
		> small
			left 0
			transform translate3d(20px,0,0)
	&.disabled
		box-shadow #e8eaef 0 0 0 16px inset
		color #e8eaef
		small
			background-color #b6c1d0
		&.active
			opacity 1
			box-shadow #b3d9fa 0 0 0 16px inset
			border-color #b3dafa
			small
				background-color #fff

.root
	span
		font-size 12px
		color #fff
		position absolute
		top 0px
		transition opacity .2s
		line-height 18px

.left
	left 10px
	opacity 0

.right
	right 10px

.active
	.left
		opacity 1
	.right
		opacity 0

.root
	&.disabled
		opacity .65
